import React from "react";
import { View, TouchableOpacity, Text } from "react-native";

import SizeUtils from "../../common/SizeUtils";
import CommonStyles from "../../common/CommonStyles";
import Config from "../../config";
import BasePage from "../common/BasePage";
import LoginSendOutAction from "../../actions/login/LoginSendOutAction";
import LoginOutAction from "../../actions/login/LoginOutAction";
import LoginCheckIsUserAction from "../../actions/login/LoginCheckIsUserAction";
import TIcon from "../../components/TIcon";

const ITEM_HEIGHT = [85, 85, 85, 85];
const ITEM_TEXT = ["修改登录手机号", "修改密码", "推送消息设置", "关于应用"];

export default class UserShezhiPage extends BasePage {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <View
        style={[
          CommonStyles.page,
          {
            paddingTop: Config.paddingTop,
            paddingLeft: SizeUtils.translateDesignWidthToCode(28),
            paddingRight: SizeUtils.translateDesignWidthToCode(28),
            backgroundColor: "#ffffff"
          }
        ]}
      >
        {ITEM_HEIGHT.map((data, index) => {
          return this._renderItem(index);
        })}
        <View style={{ flex: 1 }} />
        <TouchableOpacity
          onPress={() =>
            new LoginSendOutAction().call(
              this,
              this._loginOutCallback.bind(this)
            )}
          style={{
            marginBottom: SizeUtils.translateDesignHeightToCode(30),
            height: SizeUtils.translateDesignHeightToCode(72),
            borderRadius: 10,
            backgroundColor: "#EE3535",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Text
            style={{
              color: "#ffffff",
              fontSize: SizeUtils.translateFontSizeToCode(28)
            }}
          >
            退出登录
          </Text>
        </TouchableOpacity>
        {this._renderNavigationBar()}
      </View>
    );
  }

  _loginOutCallback() {
    new LoginOutAction().call(this, { showAlert: false });
  }

  _renderItem(index) {
    return (
      <TouchableOpacity
        key={index}
        style={{
          height: SizeUtils.translateDesignHeightToCode(ITEM_HEIGHT[index]),
          flexDirection: "row",
          alignItems: "center",
          borderBottomWidth: SizeUtils.translateDesignNumToCode(3),
          borderColor: "#eeeeee",
          justifyContent: "space-between"
        }}
        onPress={() => {
          this._onPressItem(index);
        }}
      >
        <Text
          style={{
            fontSize: SizeUtils.translateFontSizeToCode(32),
            color: "#333333"
          }}
        >
          {ITEM_TEXT[index]}
        </Text>
        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text
            style={{
              fontSize: SizeUtils.translateFontSizeToCode(28),
              color: "#66686b",
              marginRight: SizeUtils.translateDesignWidthToCode(12)
            }}
          >
            请选择
          </Text>
          <TIcon
            name="ion|ios-arrow-forward-outline"
            size={20}
            color="#333333"
            style={{
              width: SizeUtils.translateDesignWidthToCode(20),
              height: SizeUtils.translateDesignHeightToCode(20),
              marginRight: SizeUtils.translateDesignWidthToCode(26)
            }}
          />
        </View>
      </TouchableOpacity>
    );
  }

  _onPressItem(index) {
    if (index == 0) {
      new LoginCheckIsUserAction().call(
        this,
        { content: "你是游客身份，不能使用此功能" },
        result => {
          result && this.gotoPage(Config.pages.user_xgphone);
        }
      );
    } else if (index == 1) {
      new LoginCheckIsUserAction().call(
        this,
        { content: "你是游客身份，不能使用此功能" },
        result => {
          result && this.gotoPage(Config.pages.user_xgmm);
        }
      );
    } else if (index == 2) {
      this.gotoPage(Config.pages.user_tsxx);
      // this.gotoPage(Config.pages.user_contact_us);
    } else if (index == 3) {
      this.gotoPage(Config.pages.user_about);
    }
  }
}
